<template>
      <wyb-slide-listener @slideUp="onSlideUp" @slideDown="onSlideDown" @slideLeft="onSlideLeft" @slideRight="onSlideRight">
       
   
    <view class="ppic">
      
        <image :src="form.image" :style="{
            width:screenWidth+'px',
            height:screenWidth*form.size1+'px',
        }" />
        <uni-icons class="icon" :style="{
            position:'fixed',
            top:statusbarHeight + 14 +'px'
        }" type="back" size="25" @click="goBack" color="#fff"></uni-icons>
		
        <view class="bottom" style="display: flex;justify-content: center;">
            <!-- <view class="btn" style="margin-right: 14px;" @tap="save">保存图片</view> -->
            <view class="btn" @tap="send">画同款(消耗{{ cost }}{{ unit }})</view>

        </view>
        <ZWait tip="在我的" ref="zwait"></ZWait>
    </view>
    
</wyb-slide-listener>
</template>
     
<script>
import {debounce} from '@/utils'
import ZWait from '@/components/z-wait/z-wait'
import { isMobile } from '@/utils';
import img from '@/utils/img'
import wybSlideListener from '@/components/wyb-slide-listener/wyb-slide-listener.vue'
let s;
export default {
    props: {},
    components:{ ZWait,wybSlideListener },
    data() {
        return {
            cost:0,
            unit:'',
            statusbarHeight:0,
            screenWidth:0,
            msgId:'',
            form: {
                image: '',
                title: ''
            },
                flowList:[],
                index:0,
           
        };
    },
    async onLoad(opts) {
        console.log(opts)

        s = this;
        s.index = opts.index
        s.flowList = uni.getStorageSync('pics')
        if(s.flowList){
            s.flowList = JSON.parse(s.flowList)
            s.form = s.flowList[s.index]
            console.log(s.form,'qqqqq')
        }else{
            s.flowList = []
        }

        
        s.unit = uni.getStorageSync('unit')
        s.screenWidth = uni.getStorageSync('screenWidth')
        s.statusbarHeight = uni.getStorageSync('statusBarHeight')
        s.getCost()
    },
    methods: {
        onSlideUp(){
            console.log('up')
        },
        onSlideDown(){
            console.log('down')
        },
        onSlideLeft(){
            console.log('left')
            if(s.index!=s.flowList.length-1){
                s.index++
                s.form = s.flowList[s.index]
            }
        },
        onSlideRight(){
            console.log('right')
            if(s.index!=0){
                s.index--
                s.form = s.flowList[s.index]
            }
           
        },

        async getCost(){
        const r = await this.$u.api.hpaintCost()
        if(r){
            this.cost = r.data
        }
    },
        save(){
            if(isMobile()){
                img.saveImg(s.form.image)
            }else{
                // window.open(uni.getStorageSync('host')+'/gptcms/api/paint/download'+)
                
                img.download(s.form.image)
            }
            
            
        },
        async send(){
            clearInterval(this.timer)
            this.timer = null
            debounce(()=>{
                s.send1()
            })
        },
        async getResult(){
            const r = await s.$u.api.hpaintResult(
                {
                    msgid:s.msgId
                }
            )
            if(r){  
                if(r.msg!='图片生成中..'){
                    clearInterval(s.timer)
                    s.timer = null
                    s.$refs['zwait'].show(false)
                    uni.navigateTo({
                        url:'/pages/plugin/paint/index/index?index=3'
                        } 
                    )
                }
                
            }
        },
        async send1() {
            const r = await s.$u.api.hpaintSame(
                {
                   id:this.form.id
                }
            )
            if(r){
                s.msgId = r.data.msgid

                this.timer = setInterval(()=>{
                    s.getResult()
                },4000)
                s.$refs['zwait'].show(true)
            }

            
        },
        goBack(){
				uni.navigateBack({
					 delta: 1
				});
			},
    },
}
</script>
<style scoped lang="scss">
.ppic{
    min-height: 100vh;
    position: relative;
    .icon{
        position: absolute;
        left: 14px;
    }
    .bottom{
		
		bottom: 40px;
		// position: absolute;
        position: fixed;
		padding: 0 30px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
		
		
		.btn{
		
			background-image: linear-gradient(to top, #7CD887,#75CCD1);
			border-radius: 30px;
			color:#fff;
			font-size: 28rpx;
			font-weight: 500;
			text-align: center;
            width: calc(100% - 28px);
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            white-space: nowrap;
			
		}
		
	}
}
</style>